<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选课管理</title>
    <style>
        table th {
            padding: 10px;
        }
        table td {
            padding: 10px 20px;
        }
    </style>

    <script src="/js/jquery.min.js"></script>
    <script>
        //进行选课 - 课程id
        function selectCourse(cid){
            $.ajax({
                type: "POST",
                url: "/course/selector",
                data: {
                    cid: cid
                },
                success: function(data){
                    var r = data.result;
                    if (r == 1) {
                        //刷新
                        location.reload();
                    } else if(r == -1) {
                        //已经没得了
                        alert("骚瑞，你下手慢了！");
                    } else if(r == -2) {
                        alert("已经选过该课程了！");
                    }
                },
                dataType: "json"
            });
        }
    </script>
</head>
<body>
<h1>学生选课</h1>
<hr/>
<table border="1">
    <tr>
        <th>课程编号</th>
        <th>课程名称</th>
        <th>课程封面</th>
        <th>最大人数</th>
        <th>剩余座位</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <tr th:each="c : ${courses}">
        <td th:text="${c.id}">1</td>
        <td th:text="${c.courseName}">Java核心技术</td>
        <td>
            <!-- 等于null 就展示默认图片 -->
            <img th:if="${c.fengmian == null}" src="/img/default.jpg" style="width: 150px; height: 100px"/>
            <!-- 不等于null 就展示设置的图片 -->
            <img th:unless="${c.fengmian == null}" th:src="@{/course/getfengmian?fengmian={fm}(fm=${c.fengmian})}" style="width: 150px; height: 100px"/>
        </td>
        <td th:text="${c.maxNumber}">100</td>
        <td th:text="${c.hasNumber}">50</td>
        <td th:if="${c.status==0}">未开启选课</td>
        <td th:if="${c.status==1}">已开启选课</td>
        <td>
            <button th:if="${c.status==1}" th:onclick="'selectCourse(' + ${c.id} + ')'">选课</button>
        </td>
    </tr>
</table>

</body>
</html>